<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '意见反馈',
  },
}
</route>
<template>
  <div class="h-[100vh] box-border bg-[#f7f7f7]">
    <div class="py-5 bg-[#fff]">
      <wd-form ref="form" :model="model">
        <wd-cell-group>
          <div class="form-item pb-5">
            <div
              class="form-label form-label-required text-[#666] text-[16px]"
              style="margin-left: 32rpx"
            >
              详细内容
            </div>
            <div class="form-value">
              <wd-textarea
                label=""
                label-width="100px"
                prop="content"
                custom-textarea-class="feedback-textarea"
                :maxlength="200"
                v-model="model.content"
                placeholder="请输入您的建议..."
                :clearable="false"
                :rules="[{ required: true, message: '请填写内容' }]"
              />
              <div class="count text-[#666] text-[16px]">
                {{ model.content ? model.content.length : 0 }}/200
              </div>
              <div class="clear text-[#666] text-[16px]" @click.stop="model.content = ''">清除</div>
            </div>
          </div>
        </wd-cell-group>
      </wd-form>
    </div>
    <buttonBtn @btnClick="handleSubmit">
      <view>提交</view>
    </buttonBtn>
    <!-- 成功弹窗 -->
    <NsOverlay
      v-model:visible="visible"
      height="460rpx"
      footerTop="34rpx"
      okText="确定"
      buttonSize="small"
      :showCancel="false"
      @ok="handleOk"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <image src="@/static/images/check-success.png" mode="widthFix" class="w-[50px]"></image>
        <div class="mt-6 text-[#666]">提交成功</div>
      </div>
    </NsOverlay>
  </div>
</template>

<script setup lang="ts">
import NsOverlay from '@/components/ns-overlay.vue'
import { feedback } from '@/service/user'
const model = reactive<{
  // 内容
  content: string
}>({
  content: '',
})

const form = ref()

const visible = ref(false)
function handleSubmit() {
  console.log(form.value)

  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        const res: any = await feedback(model.content)
        if (res.code === 1) {
          model.content = ''
          visible.value = true
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const handleOk = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<style scoped>
.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

.form-value {
  position: relative;
  background-color: #f7f7f7;
}

.count,
.clear {
  position: absolute;
  z-index: 2;
  bottom: 40rpx;
  left: 50rpx;
  background-color: #f7f7f7;
}

.clear {
  left: unset;
  right: 50rpx;
}

:deep(.wd-textarea__value) {
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
}

:deep(.feedback-textarea) {
  padding: 16rpx 20rpx !important;
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
  border-radius: 8px !important;
}

:deep(.wd-textarea__value) {
  border-radius: 16rpx;
}

:deep(.wd-textarea__suffix) {
  display: none;
}
</style>
